<template>
	<view class="goods-detail">
		<!-- 轮播图 -->
		<!-- <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in gallery">
				<view class="swiper-item">
					<image :src="item.img_url" mode="widthFix"></image>
				</view>
			</swiper-item> -->
		<!-- </swiper> -->
		<!-- 保证图标 -->
		<view class="van-icon">
			<view>
				<u-icon size="26rpx" color="red" name="checkmark-circle-fill"></u-icon>
				<text>30天无忧退货</text>
			</view>
			<view>
				<u-icon size="26rpx" color="red" name="checkmark-circle-fill"></u-icon>
				<text>48小时快速退费</text>
			</view>
			<view>
				<u-icon size="26rpx" color="red" name="checkmark-circle-fill"></u-icon>
				<text>满88元免邮费</text>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="goods-info">
			<view class="name">{{ info.name }}</view>
			<view class="brief">{{ info.goods_brief }}</view>
			<view class="price">{{ info.retail_price }}</view>
			<view class="" v-html="info.goods_desc"></view>
		</view>
		<!-- 展示弹出层 -->
		<view class="goods-show" @tap="showModelCotent">
			<!-- 	<u-popup :show="show" @close="close" @open="open">
			    <view>
			        <text>出淤泥而不染，濯清涟而不妖</text>
			    </view>
			</u-popup> -->
			<!-- <u-button @click="show = true">打开</u-button> -->
			<text @click="show = true">展示弹出层</text>
			<!-- <u-icon name="arrow-right"></u-icon> -->
		</view>
		<!-- 商品参数 -->
		<view class="attribute">
			<view class="title">商品参数</view>
			<ul>
				<li v-for="item in attribute">
					<view class="name">{{ item.name }}</view>
					<view class="value">{{ item.value }}</view>
				</li>
			</ul>
		</view>
		<!-- 常见问题 -->
		<view class="issue">
			<view class="title">常见问题</view>
			<ul>
				<li v-for="item in issue">
					<view class="question">{{ item.question }}</view>
					<view class="answer">{{ item.answer }}</view>
				</li>
			</ul>
		</view>
		<!-- 相关产品 -->
		<view class="goodsList">
			<view class="title">相关产品</view>
			<ul>
				<view class="bigul" v-for="(item, index) in goodsList" :key="index">
					<view class="img"><image :src="item.list_pic_url" mode="widthFix"></image></view>
					<view class="name">{{ item.name }}</view>
					<view class="price">{{ item.retail_price }}</view>
				</view>
			</ul>
		</view>
		<view class="">
			<!-- 立即购买/加入购物车 -->
			<view class="goods-buy">
				<view class="star">
					<view class=""><u-icon name="star" color="#2979ff" size="22"></u-icon></view>
					<view class="txt">未收藏</view>
				</view>
				<view class="cart">
					<view class=""><u-icon name="shopping-cart" color="#2979ff" size="22"></u-icon></view>
					<view @tap="toCart" class="">购物车</view>
				</view>
				<button class="left">立即购买</button>
				<!-- <u-popup :show="show" @close="close" @open="open"> -->
				<!-- <view>
					        <text>出淤泥而不染，濯清涟而不妖</text>
					    </view> -->
				<!-- </u-popup> -->
				<button class="right" @tap="showCart">加入购物车</button>
				<!-- <u-icon name="arrow-right"></u-icon> -->
			</view>
		</view>
		<!-- <view class="mask">
				
			</view> -->
		<!-- 弹出层内容 -->
		<view class="mask" v-show="show">
			<view class="model_content" v-show="show">
				<view class="x" @tap="closeCart">x</view>
				<view class="top">
					<image :src="info.list_pic_url" mode="widthFix"></image>
					<view class="top_right">
						<view class="price">价格：{{ info.retail_price }}</view>
						<view class="num">库存：{{ info.goods_number }}</view>
					</view>
				</view>
				<view class="bottom">
					<view class="title">数量:</view>
					<view class="addnum">
						<view @tap="changeNum(-1)" class="reduce">-</view>
						<input type="view" v-model="number" />
						<view @tap="changeNum(1)" class="add">+</view>
					</view>
				</view>
			</view>
			<view class="">
				<!-- 立即购买/加入购物车 -->
				<view class="goods-buy">
					<view class="star">
						<view class=""><u-icon name="star" color="#2979ff" size="22"></u-icon></view>
						<view class="txt">未收藏</view>
					</view>
					<view class="cart">
						<view class=""><u-icon name="shopping-cart" color="#2979ff" size="22"></u-icon></view>
						<view @tap="toCart" class="">购物车</view>
					</view>
					<button class="left">立即购买</button>
					<!-- <u-popup :show="show" @close="close" @open="open"> -->
					<!-- <view>
							        <text>出淤泥而不染，濯清涟而不妖</text>
							    </view> -->
					<!-- </u-popup> -->
					<button class="right" @tap="addCart">加入购物车</button>
					<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { ApiGetGoodsDetail, ApiGetGoodsRealted,ApiAddCart } from '../../utils/api.js';
export default {
	data() {
		return {
			gallery: [],
			info: [],
			attribute: [],
			goodsList: [],
			isModelCotent: false,
			issue: [],
			show: false,
			number:1
		};
	},
	methods: {
		showModelCotent() {
			this.isModelCotent = true;
		},

		closeModelCotent() {
			this.isModelCotent = false;
		},
		open() {
			// console.log('open');
		},
		close() {
			this.show = false;
			console.log(456);
			// console.log('close');
		},
		toCart() {
			uni.switchTab({
				url: '/pages/cart/cart'
			});
		},
		showCart() {
			this.show = true;
			console.log(123);
		},
		closeCart(){
			this.show=false
		},
		changeNum(val){
			// console.log(val);
			if(val==-1&&this.number==1){
				return
			}
			this.number+=val
		},
		async addCart(){
			let res = await ApiAddCart(this.info.goods_sn,this.info.primary_product_id,this.number)
			console.log(res);
		}
	},
	async onLoad(option) {
		console.log(option);
		let res = await ApiGetGoodsDetail(option.id);
		console.log('这是商品详情的数据', res);
		let { gallery, info, attribute, issue } = res.data;
		this.gallery = gallery; //录播图
		this.info = info; //商品info信息
		this.attribute = attribute; //商品参数attribute
		this.issue = issue; //常见问题

		let res2 = await ApiGetGoodsRealted(option.id);
		console.log('这是相关产品的数据', res2);
		let { goodsList } = res2.data;
		this.goodsList = goodsList;
	},
	onShow() {
		// console.log(this.issue);
		// console.log(this.issue);
		console.log("gallery",this.gallery)
		console.log("info",this.info)
		console.log("attribute",this.attribute)
		console.log("goodsList",this.goodsList)
		console.log("isModelCotent",this.isModelCotent)
		console.log("issue",this.issue)
		console.log("show",this.show)
		console.log("number",this.number)
	}
};
</script>

<style lang="scss">
/deep/.u-popup {
	background-color: #323233;
	width: 0px !important;
}
.goods-detail {
	background-color: #efefef;
	position: relative;

	//轮播图
	.swiper {
		height: 750rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	//保证图标
	.van-icon {
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;
		background: #efefef;
		padding: 0 20rpx;
		view {
			display: flex;
			text {
				font-size: 25rpx;
				margin-left: 10rpx;
			}
		}
	}

	// 商品info信息
	.goods-info {
		height: 280rpx;
		background: #fff;
		text-align: center;
		line-height: 60rpx;
		padding: 40rpx 0;
		border-bottom: 1rpx solid #ccc;
		box-sizing: border-box;
		.name {
			font-size: 40rpx;

			height: 80rpx;
			line-height: 80rpx;
		}

		.brief {
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		.price {
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: darkred;
		}
	}

	// 展示弹出层
	.goods-show {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 16px;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		margin-bottom: 40rpx;

		text {
			width: 698rpx;
		}
	}

	// 商品参数
	.attribute {
		height: 120rpx;
		padding: 20rpx;
		background: #fff;
		box-sizing: border-box;

		.title {
			font-size: 40rpx;
			line-height: 80rpx;
			height: 80rpx;
		}

		ul {
			// margin: 0;
			// padding: 0;
			// margin-bottom: 500rpx;
			// background-color: #323233;
			li {
				// background: #fac;
				border-radius: 12rpx;
				height: 60rpx;
				align-items: center;
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;
				font-size: 28rpx;

				.name {
					color: #999;
					width: 24%;
					margin-right: 10rpx;
					text-align: right;
				}

				.value {
					flex: 1;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					display: block;
				}
			}
		}
	}

	// 常见问题
	.issue {
		background-color: white;

		.title {
			width: 30%;
			height: 80rpx;
			background: #fff;
			text-align: center;
			line-height: 80rpx;
			margin: auto;
			font-size: 36rpx;
		}

		.question {
			padding-left: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			padding-right: 20rpx;
		}

		.answer {
			padding-left: 40px;
			padding-right: 20px;
			color: #666;
			font-size: 28rpx;
		}
	}

	// 相关产品
	.goodsList {
		background-color: white;
		padding-bottom: 100rpx;
		.title {
			width: 30%;
			height: 80rpx;
			background: #fff;
			text-align: center;
			line-height: 80rpx;
			margin: auto;
			font-size: 36rpx;
		}

		ul {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0;
			box-sizing: border-box;
			width: 100%;

			.bigul {
				width: 48%;
				background: #fff;
				text-align: center;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;

				.img {
					image {
						width: 100%;
						display: block;
					}
				}

				.name {
					font-size: 28rpx;
				}

				.price {
					font-size: 28rpx;

					color: darkred;
				}
			}
		}
	}

	.goods-buy {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		background-color: #fff;
		padding-bottom: 10rpx;
		height: 120rpx;
		font-size: 28rpx;

		.star {
			justify-content: center;
			min-width: 96rpx;
			height: 100%;
			color: #646566;
			font-size: 20rpx;
			line-height: 1;
			text-align: center;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.cart {
			display: flex;
			flex-direction: column;
			align-items: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-width: 96rpx;
			height: 100%;
			color: #646566;
			font-size: 20rpx;
			line-height: 1;
			text-align: center;
			background-color: #fff;
		}

		button {
			flex: 1;
			height: 80px;

			font-size: 28rpx;
			border: none;
			border-radius: 0;
			color: white;
		}

		.left {
			margin-top: 20rpx;
			margin-left: 5rpx;
			border-top-left-radius: 100rpx;
			border-bottom-left-radius: 100rpx;
			height: 80rpx;
			background-color: #ee0a24;
			border: 1px solid #ee0a24;
		}

		.right {
			margin-top: 20rpx;
			margin-right: 5rpx;
			height: 80rpx;
			border-top-right-radius: 999rpx;
			border-bottom-right-radius: 999rpx;
			background-color: #ff976a;
			border: 1px solid #ff976a;
		}
	}
	.mask {
		height: 100vh;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		position: fixed;
		top: 0;
	}
	.model_content {
		// z-index: 999;
		height: 400rpx;
		background: #fff;
		// background-color: #fac;
		position: fixed;
		left: 0;
		bottom: 50px;
		// padding: 10px;
		box-sizing: border-box;
		width: 100%;
		padding: 40rpx;
		// margin-bottom: 60rpx;
		.x {
			position: absolute;
			top: 0;
			left: 720rpx;
			background-color: white;
		}

		.top {
			display: flex;
			height: 100rpx;

			image {
				width: 200rpx;
				height: 200rpx;
			}

			.top_right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding-left: 20rpx;
				font-size: 28rpx;
				.price {
					height: 100rpx;
					line-height: 100rpx;
					margin-top: 100rpx;
				}
				.num {
					height: 100rpx;
					line-height: 100rpx;
					// margin-top: 30rpx;
				}
			}
		}

		.bottom {
			.title {
				font-size: 40rpx;
				margin-top: 40rpx;
				margin-bottom: 40rpx;
				margin-top: 100rpx;
			}

			.addnum {
				display: flex;
				justify-content: left;
				font-size: 32rpx;

				input {
					width: 60rpx;
					font-size: 30rpx;
					height: 40rpx;
				}
				.add {
					font-size: 30rpx;
					width: 60rpx;
					text-align: center;
					&:active{
						background-color: gray;
					}
				}

				.reduce {
					font-size: 30rpx;
					width: 40rpx;
					text-align: center;
					&:active{
						background-color: gray;
					}
				}
			}
		}
	}
}
</style>
